<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="尺码图生成-单图" name="first">
      <div>
        <input type="file" accept=".xls,.xlsx" @change="fileUpload"/>
        <!--        <el-switch v-model="autoDownload" active-text="自动下载"/>-->
        <el-badge class="item" style="margin-top: 10px" :value="lastNum">
          <vxe-button status="success" icon="vxe-icon-print" circle @click="open('.image-back')"
                      style="margin-left: 20px"></vxe-button>
        </el-badge>
      </div>
      <div class="image-back">
        <div style="width: 100%;height: 35px"></div>
        <div class="table-item">
          <vxe-grid v-bind="gridOptions" @edit-disabled="editDisabledEvent" auto-resize
                    header-cell-class-name="table-item-header" align="center" v-on="gridEvents"
          >
            <template>
              <vxe-input v-model="row.cm" align="center" style="font-size: large"></vxe-input>
            </template>
            <template #xw_edit="{ row }">
              <vxe-input v-model.number="row.xw" @change="xw_edit(row)" align="center"></vxe-input>
            </template>
            <template #jk_edit="{ row }">
              <vxe-input v-model.number="row.jk" @change="jk_edit(row)" align="center"></vxe-input>
            </template>
            <template #yw_edit="{ row }">
              <vxe-input v-model.number="row.yw" @change="yw_edit(row)" align="center"></vxe-input>
            </template>
            <template #xc_edit="{ row }">
              <vxe-input v-model.number="row.xc" @change="xc_edit(row)" align="center"></vxe-input>
            </template>
            <template #xf_edit="{ row }">
              <vxe-input v-model.number="row.xf" @change="xf_edit(row)" align="center"></vxe-input>
            </template>
            <template #yc_edit="{ row }">
              <vxe-input v-model.number="row.yc" @change="yc_edit(row)" align="center"></vxe-input>
            </template>
            <template>
              <vxe-input v-model="row.cm2" align="center"></vxe-input>
            </template>
            <template #yw2_edit="{ row }">
              <vxe-input v-model.number="row.yw2" @change="yw2_edit(row)" align="center"></vxe-input>
            </template>
            <template #tw_edit="{ row }">
              <vxe-input v-model.number="row.tw" @change="tw_edit(row)" align="center"></vxe-input>
            </template>
            <template #qc_edit="{ row }">
              <vxe-input v-model.number="row.qc" @change="qc_edit(row)" align="center"></vxe-input>
            </template>
          </vxe-grid>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="产品信息图生成" name="third">
      <div>
        <input type="file" accept=".xls,.xlsx" @change="fileUploadInfo"/>
        <!--        <el-switch v-model="autoDownload" active-text="自动下载"/>-->
        <!--        <vxe-button status="success" icon="vxe-icon-print" circle @click="open('.image-back-info')"-->
        <!--                    style="margin-left: 20px"></vxe-button>-->
      </div>
      <div class="image-back-info">
        <div style="width: 100%;height: 120px"></div>
        <div style="width: 80%;margin-left: 75px">
          <el-row :gutter="20" class="row-bg">
            <el-col :span="10">
              <div class="grid-content ep-bg-purple" style="text-align: left;">
                <span class="text-font" id="content_1" style="width: 100%;"><span style="font-size: xx-small">■</span> 穿着方式：</span>
              </div>
            </el-col>
            <el-col :span="14">
              <div class="grid-content ep-bg-purple" style="text-align: left;">
                <span class="text-font" id="content_2" style="width: 100%;"><span style="font-size: xx-small">■</span> 内衬OR垫肩：</span>
              </div>
            </el-col>
          </el-row>
          <el-divider style="margin-top: 10px"/>
          <el-row :gutter="20" style="margin-top: -13px">
            <el-col :span="24">
              <div class="grid-content ep-bg-purple" style="text-align: left;">
                <span class="text-font" id="content_3" style="width: 100%;"><span style="font-size: xx-small">■</span> 拉链OR纽扣：</span>
              </div>
            </el-col>
          </el-row>
          <el-divider style="margin-top: 10px"/>
          <el-row :gutter="20" style="margin-top: -13px">
            <el-col :span="24">
              <div class="grid-content ep-bg-purple" style="text-align: left;">
                <span class="text-font" id="content_4" style="width: 100%;"><span style="font-size: xx-small">■</span> 面料：</span>
              </div>
            </el-col>
          </el-row>
          <el-divider style="margin-top: 10px"/>
          <div style="width: 500px;margin-top: 50px">
            <el-button-group style="width: 500px">
              <el-button class="el-btn-prefix" color="#C8C8C8" size="large" style="width: 100px;">[版型指数]</el-button>
              <el-button class="el-btn" size="large" id="btn_1">紧身</el-button>
              <el-button class="el-btn" size="large" id="btn_2">修身</el-button>
              <el-button class="el-btn" size="large" id="btn_3">适中</el-button>
              <el-button class="el-btn" size="large" id="btn_4">宽松</el-button>
            </el-button-group>
          </div>
          <div style="width: 500px;margin-top: 38px">
            <el-button-group style="width: 500px">
              <el-button class="el-btn-prefix" color="#C8C8C8" size="large" style="width: 100px">[弹性指数]</el-button>
              <el-button class="el-btn" size="large" id="btn_5">无弹</el-button>
              <el-button class="el-btn" size="large" id="btn_6">微弹</el-button>
              <el-button class="el-btn" size="large" id="btn_7">中弹</el-button>
              <el-button class="el-btn" size="large" id="btn_8">高弹</el-button>
            </el-button-group>
          </div>
          <div style="width: 500px;margin-top: 38px">
            <el-button-group style="width: 500px">
              <el-button class="el-btn-prefix" color="#C8C8C8" size="large" style="width: 100px">[厚度指数]</el-button>
              <el-button class="el-btn" size="large" id="btn_9">薄款</el-button>
              <el-button class="el-btn" size="large" id="btn_10">适中</el-button>
              <el-button class="el-btn" size="large" id="btn_11">厚款</el-button>
              <el-button class="el-btn" size="large" id="btn_12">加厚</el-button>
            </el-button-group>
          </div>
          <div style="width: 500px;margin-top: 38px">
            <el-button-group style="width: 500px">
              <el-button class="el-btn-prefix" color="#C8C8C8" size="large" style="width: 100px">[柔软指数]</el-button>
              <el-button class="el-btn" size="large" id="btn_13">不软</el-button>
              <el-button class="el-btn" size="large" id="btn_14">偏软</el-button>
              <el-button class="el-btn" size="large" id="btn_15">适中</el-button>
              <el-button class="el-btn" size="large" id="btn_16">柔软</el-button>
            </el-button-group>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="产品图片添加白边" name="four">
      <div>
        <input type="file" multiple accept=".jpg,.jpeg,.png" @change="fileUploadImage"/>
        <!--        <el-switch v-model="autoDownload" active-text="自动下载"/>-->
        压缩质量：
        <el-input-number v-model="compressor_scale" style="width: 80px" controls-position="right"
                         placeholder="压缩质量" :value-on-clear="0.7" :step="0.1" :min="0.5" :max="1"
                         :label="压缩质量"/>
        <vxe-button status="success" icon="vxe-icon-print" circle @click="downloadBachImageWhiteBorder()"
                    style="margin-left: 20px"></vxe-button>

      </div>
      <div class="" v-for="(item,idx) in imageDatas" :key="idx" :item="item" style="max-width: 1240px">
        <!--        <div style="text-align: left;width: 1200px;margin-left: 20px">{{ item.name }}</div>-->
        <el-divider content-position="left">{{ item.name }}</el-divider>
        <div style="width: 1240px;height: auto" class="image-white-border" :data-name="item.name">
          <div style="width: 100%;height: 20px"></div>
          <div style="width: 1200px;margin-left: 20px;background-color: white;height: auto">
            <img style="max-width:1200px;width: 1200px;height: auto" :name="item.name" :src="item.base64data"
                 v-if="item.base64data">
          </div>
          <div style="width: 100%;height: 20px"></div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="尺码图生成-批量-迭代中" disabled name="second">
      <input type="file" multiple accept=".xls,.xlsx" @change="fileUpload"/>
      <el-switch v-model="autoDownload" active-text="自动下载"/>
      <el-badge class="item" style="margin-top: 10px" :value="lastNum">
        <vxe-button status="success" icon="vxe-icon-print" circle @click="open('.image-back')"
                    style="margin-left: 20px"></vxe-button>
      </el-badge>
      <div style="text-align: left">
        <el-tabs type="card" style="margin-left: 50px">
          <el-tab-pane :label="item.size" v-for="(item,idx) in xlsxs" :key="idx" :item="item">
            <div class="image-back">
              <el-table :data="item.data" style="width: 790px">
                <el-table-column prop="id" label="尺码" width="150"/>
                <el-table-column prop="name" label="衣长" width="150"/>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!--      <div style="width: 100%;height: 35px"></div>-->

    </el-tab-pane>
  </el-tabs>


</template>

<script setup>
import {nextTick, reactive, ref} from 'vue'
import html2canvas from 'html2canvas';
import ImageCompressor from 'image-compressor.js';
import {ElMessage, ElMessageBox} from 'element-plus'
import * as XLSX from 'xlsx';

let compressor_scale = ref(0.7)

let xlsxs = [{
  "size": "VJE001",
  "data": [{"id": 1, "name": "VJE001"}, {"id": 2, "name": "VJE001"}]
}, {
  "size": "VJE002",
  "data": [{"id": 1, "name": "VJE002"}, {"id": 2, "name": "VJE002"}]
}, {
  "size": "VJE003",
  "data": [{"id": 1, "name": "VJE003"}, {"id": 2, "name": "VJE003"}]
}]

let imageDatas = ref([])

let activeName = 'first'

let lastNum = ref(0);

let imageName = null;
const excelData = ref(null);

let autoDownload = ref(true)

const fileUpload = (event) => {
  const files = event.target.files;
  if (files.length > 0) {
    /*批量选择文件时，默认打开自动下载*/
    autoDownload.value = false
    lastNum.value = files.length;
    fetchFiles(files, 0);
  }
}

const fileUploadInfo = (event) => {
  const files = event.target.files[0];
  if (files) fetchFileInfo(files);
}


const fileUploadImage = (event) => {
  const files = event.target.files;
  if (files.length > 30) {
    ElMessage({
      type: 'info',
      message: '选择图片数量不可超过30',
    })
    return;
  }
  for (const file of files) {

    new ImageCompressor(file, {
      quality: compressor_scale, // 压缩质量，可根据需要调整
      width: 1200, // 最大宽度，可根据需要调整
      mimeType: 'image/jpeg',
      success(result) {
        // 压缩后的文件，可以进行上传等操作
        console.log(result);
        const url = URL.createObjectURL(result);
        imageDatas.value.push({
          "name": file.name,
          "base64data": url
        })
      },
      error(err) {
        console.error(err.message);
      },
    });
    // fetchImageFiles(file)
  }
}

const downloadBachImageWhiteBorder = () => {
  let elementNodeList = document.querySelectorAll(".image-white-border");
  console.log(elementNodeList.length)
  printImageBorder(elementNodeList, 0)
}

const printImageBorder = (elementNodeList, idx) => {
  const element = elementNodeList[idx]
  element.removeAttribute('display')

  let imageName = element.dataset.name;

  html2canvas(element, {
    scale: window.devicePixelRatio,
    width: 1240,
    useCORS: true // 添加这个选项以解决跨域问题
  }).then((canvas) => {
    const link = document.createElement('a');
    link.style.width = '1240px';
    link.style.height = 'auto';

    link.href = canvas.toDataURL('image/jpeg');
    link.download = imageName;
    console.log(imageName)
    link.click();
    if (idx < elementNodeList.length - 1) printImageBorder(elementNodeList, ++idx);
  });
}


// const fetchImageFiles = (image) => {
//   const reader = new FileReader();
//   let imageName = image.name
//   reader.onload = async (e) => {
//     const fileData = e.target.result;
//     imageDatas.value.push({
//       "name": imageName,
//       "base64data": fileData
//     })
//   };
//   reader.readAsDataURL(image);
// }


const fetchFileInfo = (file) => {
  const reader = new FileReader();
  reader.onload = async (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, {type: 'array'});
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    excelData.value = XLSX.utils.sheet_to_json(worksheet, {header: 1});

    const rows = excelData.value.length
    if (rows === 0) {
      ElMessage({
        type: 'error',
        message: '表格数据解析失败',
      })
      return;
    }

    bulidGoodsInfo(excelData.value, 0)

  };
  reader.readAsArrayBuffer(file);
}

const bindingInfoMap_banxing = new Map([
  ["紧身", "btn_1"],
  ["修身", "btn_2"],
  ["适中", "btn_3"],
  ["宽松", "btn_4"],
])
const bindingInfoMap_tanxing = new Map([
  ["无弹", "btn_5"],
  ["微弹", "btn_6"],
  ["中弹", "btn_7"],
  ["高弹", "btn_8"],
])
const bindingInfoMap_houdu = new Map([
  ["薄款", "btn_9"],
  ["适中", "btn_10"],
  ["厚款", "btn_11"],
  ["加厚", "btn_12"],
])
const bindingInfoMap_rouruan = new Map([
  ["不软", "btn_13"],
  ["偏软", "btn_14"],
  ["适中", "btn_15"],
  ["柔软", "btn_16"],
])

const bulidGoodsInfo = async (rows, i) => {

  /*编号*/
  let goodsNo = rows[i][0];
  /*穿着方式*/
  let goodsFS = rows[i][1];

  /*指数*/
  let goodsZS = rows[i][2];
  if (goodsFS && goodsZS) {
    let split = goodsFS.split("\r");
    for (let i = 0; i < split.length; i++) {
      let splitElement = split[i];
      splitElement = splitElement.replace(/\n/g, '').trim();
      let element = document.querySelector("#content_" + (i + 1));
      /*可能是面料批次2*/
      if (i === 4) {
        element = document.querySelector("#content_" + 4);
        element.innerHTML = element.innerHTML + "；" + splitElement.toUpperCase()
      } else {
        if (element) {
          element.innerHTML = "<span style='font-size:xx-small'>■</span> " + splitElement.toUpperCase();
        }
      }
    }

    /*重置按钮背景色*/
    let elementButtons = document.querySelectorAll(".el-btn");
    for (let index in elementButtons) {
      let id = elementButtons[index].id;
      if (id) {
        document.getElementById(id).style.backgroundColor = ""
        document.getElementById(id).style.color = ""
      }
    }

    let zs_split = goodsZS.split("；");
    for (let i = 0; i < zs_split.length; i++) {
      let element;
      let btnTxt = zs_split[i];
      btnTxt = btnTxt.replace(/\n/g, '').trim();
      if (i === 0) {
        let eleId = bindingInfoMap_banxing.get(btnTxt);
        element = document.getElementById(eleId);
      }
      if (i === 1) {
        let eleId = bindingInfoMap_tanxing.get(btnTxt);
        element = document.getElementById(eleId);
      }
      if (i === 2) {
        let eleId = bindingInfoMap_houdu.get(btnTxt);
        element = document.getElementById(eleId);
      }
      if (i === 3) {
        let eleId = bindingInfoMap_rouruan.get(btnTxt);
        element = document.getElementById(eleId);
      }
      element.style.backgroundColor = '#565656'
      element.style.color = '#FFFFFF'
    }
    imageName = goodsNo + '.png';
    const element = document.querySelector('.image-back-info');
    await nextTick();
    printEventInfoThread(element, imageName, rows, i)
  } else {
    if (i < rows.length - 1) bulidGoodsInfo(rows, ++i);
  }
}


/**
 * 根据files的长度处理数据
 * @param files
 * @param i
 */
const fetchFiles = (files, i) => {
  const file = files[i];
  const reader = new FileReader();
  lastNum.value = lastNum.value - 1;
  reader.onload = async (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, {type: 'array'});
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    excelData.value = XLSX.utils.sheet_to_json(worksheet, {header: 1});

    /*货号*/
    let valueElementElement = excelData.value[1][0];
    let goodsNo = valueElementElement.split(":")[1];
    /*这里做一下兼容性处理*/
    if (!goodsNo) {
      goodsNo = valueElementElement.split("：")[1];
    }

    let imageName_current = goodsNo + '.png';
    imageName = imageName_current

    let row_index_start = 3;
    let row_index_end = 14;

    let cell_index_bw = 3;
    let cell_index_cm = 6;
    gridOptions.columns = new Array();
    await nextTick();
    gridOptions.columns.push({field: 'cm', title: '尺码', editRender: {}, slots: {edit: 'cm_edit'}})

    /*是否已添加尺码2信息*/
    let cm2Flag = false;

    for (let j = row_index_start; j <= row_index_end; j++) {
      let bw = excelData.value[j][cell_index_bw];
      let cm = excelData.value[j][cell_index_cm];

      if (bw && cm && bw !== '袖口' && bw !== '下摆' && bw !== '脚口') {
        if (j <= 9) {
          let field = bindingMap_1.get(bw)
          let datum = gridOptions.data[1];
          datum[field] = cm;
          /*设置其他尺码*/
          let step = bindingMap_step.get(field);
          gridOptions.data[0][field] = cm - step;
          gridOptions.data[2][field] = cm + step;
          gridOptions.data[3][field] = cm + step * 2;
          gridOptions.data[4][field] = cm + step * 3;
          gridOptions.data[5][field] = cm + step * 4;

          gridOptions.columns.push({field: field, title: bw, editRender: {}, slots: {edit: field + '_edit'}})
        } else {
          if (!cm2Flag && gridOptions.columns.length > 6) {
            gridOptions.columns.push({field: 'cm2', title: '尺码', editRender: {}, slots: {edit: 'cm2_edit'}})
            cm2Flag = true
          }
          let field = bindingMap_2.get(bw)
          let datum = gridOptions.data[1];
          datum[field] = cm

          /*设置其他尺码*/
          let step = bindingMap_step.get(field);
          gridOptions.data[0][field] = cm - step;
          gridOptions.data[2][field] = cm + step;
          gridOptions.data[3][field] = cm + step * 2;
          gridOptions.data[4][field] = cm + step * 3;
          gridOptions.data[5][field] = cm + step * 4;

          gridOptions.columns.push({field: field, title: bw, editRender: {}, slots: {edit: field + '_edit'}})
        }
      }
    }
    await nextTick();
    /*https://vxetable.cn/#/grid/api*/
    /*这一行需要获取到grid对象，然后执行loaddata方法重新渲染*/
    if (autoDownload.value) {
      const element = document.querySelector('.image-back');
      await nextTick();
      printEventThread(element, imageName_current, files, i)
    }
  };
  reader.readAsArrayBuffer(file);
}
const bindingMap_step = new Map([
  ['xw', 4],
  ['jk', 1],
  ['yw', 4],
  ['xc', 0],
  ['xf', 1],
  ['yc', 0],
  ['yw2', 4],
  ['tw', 4],
  ['qc', 0],
  ['kc', 0]
])

const bindingMap_1 = new Map([
  ["胸围", 'xw'],
  ["肩宽", 'jk'],
  ["腰围", 'yw'],
  ["袖长", 'xc'],
  ["袖肥", 'xf'],
  ["衣长", 'yc'],
  ["臀围", 'tw']
])

const bindingMap_2 = new Map([
  ["腰围", 'yw2'],
  ["臀围", 'tw'],
  ["裤长", 'kc'],
  ["裙长", 'qc']
])

const open = (className) => {
  if (!imageName) {
    ElMessageBox.prompt('输入款号下载图片，示例：VJE24W8043', '款号', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
    }).then(({value}) => {
      imageName = value + '.png';
      printEvent(className)
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '输入取消',
      })
    })
  } else {
    printEvent(className)
  }
}

const handleClick = (tab) => {
  console.log(tab);
}

const gridEvents = {
  headerCellClick(table) {
    let $grid = table.$grid;
    const {column} = table
    $grid.hideColumn(column)
  }
}


const gridOptions = reactive({
  border: false,
  showOverflow: true,
  rowConfig: {
    height: '52px'
  },

  editConfig: {
    trigger: 'click',
    mode: 'row',
    showIcon: false,
    beforeEditMethod({rowIndex}) {
      if (rowIndex === 1) {
        return true
      }
      return false
    }
  },
  columns: [
    {field: 'cm', title: '尺码', editRender: {}, slots: {edit: 'cm_edit'}},
    {field: 'xw', title: '胸围', editRender: {}, slots: {edit: 'xw_edit'}},
    {field: 'jk', title: '肩宽', editRender: {}, slots: {edit: 'jk_edit'}},
    {field: 'yw', title: '腰围', editRender: {}, slots: {edit: 'yw_edit'}},
    {field: 'xc', title: '袖长', editRender: {}, slots: {edit: 'xc_edit'}},
    {field: 'xf', title: '袖肥', editRender: {}, slots: {edit: 'xf_edit'}},
    {field: 'yc', title: '衣长', editRender: {}, slots: {edit: 'yc_edit'}},
    {field: 'cm2', title: '尺码', editRender: {}, slots: {edit: 'cm2_edit'}},
    {field: 'yw2', title: '腰围', editRender: {}, slots: {edit: 'yw2_edit'}},
    {field: 'tw', title: '臀围', editRender: {}, slots: {edit: 'tw_edit'}},
    {field: 'qc', title: '裙长', editRender: {}, slots: {edit: 'qc_edit'}}
  ],

  data: [
    {
      id: 10001,
      cm: 'XS',
      xw: '',
      jk: '',
      yw: '',
      xc: '',
      xf: '',
      yc: '',
      cm2: 'XS',
      yw2: '',
      tw: '',
      qc: ''
    },
    {
      id: 10002,
      cm: 'S',
      xw: '',
      jk: '',
      yw: '',
      xc: '',
      xf: '',
      yc: '',
      cm2: 'S',
      yw2: '',
      tw: '',
      qc: ''
    }, {
      id: 10003,
      cm: 'M',
      xw: '',
      jk: '',
      yw: '',
      xc: '',
      xf: '',
      yc: '',
      cm2: 'M',
      yw2: '',
      tw: '',
      qc: ''
    }, {
      id: 10004,
      cm: 'L',
      xw: '',
      jk: '',
      yw: '',
      xc: '',
      xf: '',
      yc: '',
      cm2: 'L',
      yw2: '',
      tw: '',
      qc: ''
    }, {
      id: 10005,
      cm: 'XL',
      xw: '',
      jk: '',
      yw: '',
      xc: '',
      xf: '',
      yc: '',
      cm2: 'XL',
      yw2: '',
      tw: '',
      qc: ''
    }, {
      id: 10006,
      cm: 'XXL',
      xw: '',
      jk: '',
      yw: '',
      xc: '',
      xf: '',
      yc: '',
      cm2: 'XXL',
      yw2: '',
      tw: '',
      qc: ''
    }
  ]
})


//胸围编辑
const xw_edit = (rows) => {
  const xw = rows.xw;
  const step = 4
  gridOptions.data[0].xw = xw - step
  gridOptions.data[2].xw = xw + step
  gridOptions.data[3].xw = xw + step * 2
  gridOptions.data[4].xw = xw + step * 3
  gridOptions.data[5].xw = xw + step * 4
}
//肩宽编辑
const jk_edit = (rows) => {
  const jk = rows.jk;
  const step = 1
  gridOptions.data[0].jk = jk - step
  gridOptions.data[2].jk = jk + step
  gridOptions.data[3].jk = jk + step * 2
  gridOptions.data[4].jk = jk + step * 3
  gridOptions.data[5].jk = jk + step * 4
}

//腰围编辑
const yw_edit = (rows) => {
  const yw = rows.yw;
  const step = 4
  gridOptions.data[0].yw = yw - step
  gridOptions.data[2].yw = yw + step
  gridOptions.data[3].yw = yw + step * 2
  gridOptions.data[4].yw = yw + step * 3
  gridOptions.data[5].yw = yw + step * 4
}

//袖长编辑
const xc_edit = (rows) => {
  const xc = rows.xc;
  gridOptions.data[0].xc = xc
  gridOptions.data[2].xc = xc
  gridOptions.data[3].xc = xc
  gridOptions.data[4].xc = xc
  gridOptions.data[5].xc = xc
}

const xf_edit = (rows) => {
  const xf = rows.xf;
  const step = 1
  gridOptions.data[0].xf = xf - step
  gridOptions.data[2].xf = xf + step
  gridOptions.data[3].xf = xf + step * 2
  gridOptions.data[4].xf = xf + step * 3
  gridOptions.data[5].xf = xf + step * 4
}

const yc_edit = (rows) => {
  const yc = rows.yc;
  gridOptions.data[0].yc = yc
  gridOptions.data[2].yc = yc
  gridOptions.data[3].yc = yc
  gridOptions.data[4].yc = yc
  gridOptions.data[5].yc = yc
}
const yw2_edit = (rows) => {
  const yw2 = rows.yw2;
  const step = 4
  gridOptions.data[0].yw2 = yw2 - step
  gridOptions.data[2].yw2 = yw2 + step
  gridOptions.data[3].yw2 = yw2 + step * 2
  gridOptions.data[4].yw2 = yw2 + step * 3
  gridOptions.data[5].yw2 = yw2 + step * 4
}

const tw_edit = (rows) => {
  const tw = rows.tw;
  const step = 4
  gridOptions.data[0].tw = tw - step
  gridOptions.data[2].tw = tw + step
  gridOptions.data[3].tw = tw + step * 2
  gridOptions.data[4].tw = tw + step * 3
  gridOptions.data[5].tw = tw + step * 4
}

const qc_edit = (rows) => {
  const qc = rows.qc;
  gridOptions.data[0].qc = qc
  gridOptions.data[2].qc = qc
  gridOptions.data[3].qc = qc
  gridOptions.data[4].qc = qc
  gridOptions.data[5].qc = qc
}

const editDisabledEvent = () => {
  console.log('禁止编辑')
}

const printEvent = (className, imageNameCurrent) => {
  const element = document.querySelector(className);
  html2canvas(element, {
    useCORS: true // 添加这个选项以解决跨域问题
  }).then((canvas) => {
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    if (imageNameCurrent) {
      link.download = imageNameCurrent;
    } else {
      link.download = imageName;
    }
    link.click();
  });
}
const printEventInfoThread = (element, imageNameCurrent, rows, i) => {
  html2canvas(element, {
    useCORS: true // 添加这个选项以解决跨域问题
  }).then((canvas) => {
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    if (imageNameCurrent) {
      link.download = imageNameCurrent;
    } else {
      link.download = imageName;
    }
    link.click();
    if (i < rows.length - 1) bulidGoodsInfo(rows, ++i);
  });
}

const printEventThread = (element, imageNameCurrent, files, i) => {
  html2canvas(element, {
    useCORS: true // 添加这个选项以解决跨域问题
  }).then((canvas) => {
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    if (imageNameCurrent) {
      link.download = imageNameCurrent;
    } else {
      link.download = imageName;
    }
    link.click();
    if (lastNum.value === 0) {
      window.location.reload()
    }
    if (i < files.length - 1) {
      fetchFiles(files, ++i);
    }
  });
}
</script>

<style>
@font-face {
  font-family: 'AlibabaPuHuiTi-3-65-Medium';
  src: url('~@/assets/fonts/AlibabaPuHuiTi-3-65-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AlibabaPuHuiTi-3-55-Regular';
  src: url('~@/assets/fonts/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


.vxe-cell--title, .vxe-cell--label {
  font-size: large;
  font-family: "AlibabaPuHuiTi-3-55-Regular";
}

.text-font {
  font-family: "AlibabaPuHuiTi-3-65-Medium" !important;
  color: #565656;
}

.table-item {
  width: 81.4%;
  height: auto;
  align-items: center;
  display: grid;
  //margin-left: 68px;
  margin-right: 10px;
}

.image-back, .image-back-1, .image-back-2, .image-back-3, .image-back-4, .image-back-5, .image-back-6 {
  width: 790px;
  background-image: url(https://manwei00.oss-cn-shanghai.aliyuncs.com/cxy/d40f3982412146c0a59d4790f07f5e52/pc/2024/04/11/202404111826574QZT3WESF.jpg);
  background-size: cover; /* 或者其他你需要的值 */
  background-position: center; /* 或者其他你需要的值 */
  background-repeat: no-repeat; /* 或者其他你需要的值 */
  justify-content: center;
  justify-items: center;
  height: 1300px;
}

.image-back-info {
  width: 790px;
  background-image: url(https://manwei00.oss-cn-shanghai.aliyuncs.com/cxy/d40f3982412146c0a59d4790f07f5e52/pc/2024/07/29/20240729103146E3I3F1WU6.png);
  background-size: cover; /* 或者其他你需要的值 */
  background-position: center; /* 或者其他你需要的值 */
  background-repeat: no-repeat; /* 或者其他你需要的值 */
  justify-content: center;
  justify-items: center;
  height: 660px;
}

.el-btn {
  width: 75px;
  border: 1.5px solid #C8C8C8 !important;
  font-family: "AlibabaPuHuiTi-3-65-Medium" !important;
  border-left: none;
  font-size: medium !important;
}

.el-btn-prefix {
  font-family: "AlibabaPuHuiTi-3-65-Medium" !important;
  font-size: medium !important;
}

.--el-font-family {
  font-family: "AlibabaPuHuiTi-3-55-Regular" !important;
}


.table-item-header {
  background-color: rgb(239, 239, 239);
}
</style>
